<template>
  <div class="city-page">
    <van-nav-bar title="城市列表" left-arrow @click-left="$router.back()" />
    <!-- 列表内容 -->
    <van-index-bar highlight-color="#21b97a" :sticky="false">
      <!-- 当前城市 -->
      <van-index-anchor index="当前城市" />
      <van-cell :title="nowCity" />

      <!-- 热门城市 -->
      <hot-city @change="change"></hot-city>

      <!-- A-Z -->
      <city-item @change="change" :body='allCity' :item="item" v-for="(item, index) in az" :key="index"></city-item>
    </van-index-bar>
  </div>
</template>

<script>
import CityItem from '@/components/CityItem.vue'
import HotCity from '@/components/HotCity.vue'
import { getAllCity } from '@/api/atticle'

export default {
  name: 'city-page',
  components: {
    CityItem,
    HotCity
  },
  data () {
    return {
      hotCity: [],
      allCity: [],
      az: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      nowCity: ''
    }
  },
  methods: {
    change (title) {
      this.nowCity = title
      this.$router.push(
        {
          path: '/article',
          query: { data: title }
        }
      )
    }
  },
  // computed: {
  //   change (title) {
  //     return title
  //   }
  // },
  async created () {
    const { body } = await getAllCity()
    console.log(body)
    this.allCity.push(...body)
  }

}
</script>

<style lang="less" scoped></style>
